// 堆叠面积图组件
import BaseLineChartComponent from "./base-line-chart.js";

class StackedAreaChart extends BaseLineChartComponent {
    constructor() {
        super();
    }
    
    // 重写默认配置
    getDefaultConfig() {
        const config = super.getDefaultConfig();
        
        // 堆叠面积图特定配置
        config.titleAttrs = [
            ...config.titleAttrs,
            ['title-text_text', '堆叠面积图'],
            ['title-subtext_text', '多数据系列堆叠面积展示']
        ];
        
        config.seriesAttrs = [
            ...config.seriesAttrs,
            ['series-smooth_radio', false],
            ['series-areastyle-show_radio', true],  // 开启面积显示
            ['series-areastyle-color-gradient-show_radio', false],  // 关闭渐变
            ['series-stack_text', 'Total']  // 开启堆叠
        ];
        
        return config;
    }
    
    // 重写默认数据 - 适合堆叠面积展示的数据
    getDefaultData() {
        return [
            {
                "移动端": [
                    { "name": "1月", "value": 1200 },
                    { "name": "2月", "value": 1500 },
                    { "name": "3月", "value": 1800 },
                    { "name": "4月", "value": 2000 },
                    { "name": "5月", "value": 2300 },
                    { "name": "6月", "value": 2500 }
                ]
            },
            {
                "桌面端": [
                    { "name": "1月", "value": 1800 },
                    { "name": "2月", "value": 1700 },
                    { "name": "3月", "value": 1600 },
                    { "name": "4月", "value": 1500 },
                    { "name": "5月", "value": 1400 },
                    { "name": "6月", "value": 1300 }
                ]
            },
            {
                "平板端": [
                    { "name": "1月", "value": 500 },
                    { "name": "2月", "value": 600 },
                    { "name": "3月", "value": 700 },
                    { "name": "4月", "value": 800 },
                    { "name": "5月", "value": 900 },
                    { "name": "6月", "value": 1000 }
                ]
            }
        ];
    }
    
    // 生成系列配置 - 确保是堆叠面积图
    generateSeries(dataDemo, seriesConfig) {
        const defaultGradients = this.getDefaultGradients();
        const series = super.generateSeries(dataDemo, seriesConfig);
        
        // 确保开启堆叠和面积显示，使用纯色填充
        return series.map((s, index) => {
            const gradientIndex = index % defaultGradients.length;
            const defaultColor = defaultGradients[gradientIndex].start;
            
            return {
                ...s,
                smooth: false,
                stack: 'Total',
                areaStyle: {
                    color: seriesConfig.areastyleColor || defaultColor
                }
            };
        });
    }
}

// 定义自定义元素
customElements.define('stacked-area-chart', StackedAreaChart);
